<template>
    <cl-crud ref="Crud">
        <cl-view-head v-if="route.query.id||route.query.roomId" />
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <!-- <cl-search-key placeholder="搜索备注" /> -->
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table">
                <!-- 玩家名称 -->
                <template #column-ownerNickname="{ scope }">
                    <span>{{ scope.row.playerId?scope.row.ownerNickname:"试玩玩家" }}</span>
                </template>
            </cl-table>
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="game-record" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { reactive } from 'vue';

const { service, route } = useCool();
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: '用户信息',
			prop: 'playerId',
			options: [],
			component: {
				name: 'el-select',
				props: {
					filterable: true
				}
			},
			required: true
		},
		{
			label: '关卡信息',
			prop: 'levelId',
			component: {
				name: 'el-select',
				options: [],
				props: {
					filterable: true
				}
			},
			required: true
		}
	],
	async onOpened(data) {
		service.game.info
			.list({
				sort: 'asc',
				order: 'orderNum'
			})
			.then(res => {
				Upsert.value?.setOptions(
					'levelId',
					res.map(e => {
						return {
							label: e.name || '',
							value: e.id
						};
					})
				);
			});
		service.user.info.list().then(res => {
			Upsert.value?.setOptions(
				'playerId',
				res.map(e => {
					return {
						label: e.nickName || '',
						value: e.id
					};
				})
			);
		});
	}
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '关卡信息', prop: 'levelName', minWidth: 120 },
		{
			label: '玩家头像',
			prop: 'playerAvatar',
			minWidth: 140,
			component: {
				name: 'cl-avatar'
			}
		},
		{ label: '玩家信息', prop: 'playerNickname', minWidth: 140 },
		{
			label: '更新时间',
			prop: 'updateTime',
			minWidth: 170,
			sortable: 'custom',
			component: { name: 'cl-date-text' }
		},
		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 170,
			sortable: 'desc',
			component: { name: 'cl-date-text' }
		},
		{ type: 'op', buttons: ['delete'] } //'edit',
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.game.player
	},
	app => {
		app.refresh({
			playerId: route.query.id
		});
	}
);
function aaa() {
	console.log(222);
}
// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
